<script src='{$base_dir}js/AJAX_OutPatientFlow_AddService.js' type="text/javascript" ></script>
<script type="text/javascript">
{literal}
    $(document).ready(function() {
        $('select#service').change(function() {
            ajaxRoomFilter($(this));        
        });
        
        $('select#department').change(function() {              
            ajaxServiceFilter($(this));     
        });
        
        $('input#add_service').click(function() {       
            addServiceAjax();
        });
        
        $('#add_composite_service').click(function(){
            addCompositeService();
        });
        
        $('#addParaClinic').click(function(){
            addParaclinicalService();
        });
        
        ajaxRoomFilter($('select#service'));
    });
{/literal}
</script>
<div>
    <!-- Hidden field of ticket Id -->
    <input type="hidden" name="ticket_id" id="ticket_id" value="{$ticketId}">
    
    <!-- Add service element -->
    <div id="element_add_service" style="padding: 5px 0px;">      
        {include file="ticket/element_add_service_paraclinic.html"}
    </div>
    
    <!-- Ajax loader -->
    <div id="loading" align="center" style="position: absolute; display: none; padding-left: 400px;">
        <img src="{$base_uri}/images/ajax-loader.gif"/>     
    </div>
    
    <!-- Ticket content -->
    <div id="content_ticket_item" style="padding: 10px 0px;">
        {include file="ticket/element_ticket_content.html"}
    </div>
</div>